var React = require('react');
var ModalDialog = require('../../common/component/dialog/modal-dialog.node');
var ModalBody = require('../../common/component/dialog/modal-body.node');
var ModalFooter = require('../../common/component/dialog/modal-footer.node');


module.exports = function AssignFunctionDialog(props) {

  return (
    <ModalDialog dialogTitle="${t('ui.menu.common.dialog.assignFunction')}">
      <ModalBody>
        <form>
          <nav>
            <div className="nav nav-tabs" role="tablist">
              <button data-x-ui="assignedFunctionNavTab" className="nav-link active" type="button" role="tab"
                data-toggle="tab">
                {"${t('ui.menu.assignFunctionDialog.tab.assignedFunction')}"}
              </button>
              <button data-x-ui="assignableFunctionNavTab" className="nav-link" type="button" role="tab"
                data-toggle="tab" disabled>
                {"${t('ui.menu.assignFunctionDialog.tab.assignableFunction')}"}
              </button>
            </div>
          </nav>

          <div className="tab-content" >
            {/* 已分配功能 */}
            <div data-x-ui="assignedFunctionTabPane" className="tab-pane fade show active" role="tabpanel">
              <table data-x-ui="assignedFunctionTable" className="x-table-custom"
                data-x-name="assignedFunctions" data-x-type="dataGrid">
                <thead>
                  <tr>
                    <th data-field="id" data-visible="false">ID</th>
                    <th data-field="functionCode">{"${t('ui.security.function.field.functionCode')}"}</th>
                    <th data-field="functionName">{"${t('ui.security.function.field.functionName')}"}</th>
                    <th data-field="remark">{"${t('ui.system.common.field.remark')}"}</th>
                    <th>{"${t('ui.system.common.field.operate')}"}</th>
                  </tr>
                </thead>
              </table>
            </div>
            {/* END 已分配功能 */}

            {/* 可分配功能 */}
            <div data-x-ui="assignableFunctionTabPane" className="tab-pane fade" role="tabpanel">

              <div className="x-search-bar">
                <form>
                  <div className="form-row align-items-center">

                    <div className="col-auto">
                      <label className="sr-only" htmlFor="functionCode"></label>
                      <div className="input-group mb-2">
                        <div className="input-group-prepend">
                          <div className="input-group-text">{"${t('ui.security.function.field.functionCode')}"}</div>
                        </div>
                        <input type="text" className="form-control" id="functionCode" data-x-name="searchFunctionField.functionCode" data-x-type="autoTrimText" />
                      </div>
                    </div>

                    <div className="col-auto">
                      <label className="sr-only" htmlFor="functionName"></label>
                      <div className="input-group mb-2">
                        <div className="input-group-prepend">
                          <div className="input-group-text">{"${t('ui.security.function.field.functionName')}"}</div>
                        </div>
                        <input type="text" className="form-control" id="functionName" data-x-name="searchFunctionField.functionName" data-x-type="autoTrimText" />
                      </div>
                    </div>

                    {/* 查询按钮 */}
                    <div className="col-auto">
                      <button type="button" className="btn btn-primary mb-2" data-x-ui="searchFunctionBtn">
                        {"${t('ui.system.common.btn.search')}"}
                      </button>
                    </div>
                  </div>
                </form>
              </div>

              <table data-x-ui="assignableFunctionTable" className="x-table-custom">
                <thead>
                  <tr>
                    <th data-checkbox="true"></th>
                    <th data-field="id" data-visible="false">ID</th>
                    <th data-field="functionCode">{"${t('ui.security.function.field.functionCode')}"}</th>
                    <th data-field="functionName">{"${t('ui.security.function.field.functionName')}"}</th>
                    <th data-field="remark">{"${t('ui.system.common.field.remark')}"}</th>
                    <th>{"${t('ui.system.common.field.operate')}"}</th>
                  </tr>
                </thead>
              </table>
            </div>
            {/* END 可分配功能 */}
          </div>
        </form>
      </ModalBody>

      <ModalFooter
        confirmLabel="${t('ui.system.common.btn.save')}" cancelLabel="${t('ui.system.common.btn.cancel')}" />
    </ModalDialog>
  )
};
